<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>作业</title>
    <link rel="stylesheet" href="./common/reset.css">
    <style>
        #animated_div {
            margin: 40px 0 0 20px;
            width: 100px;
            height: 47px;
            background: #92B901;
            color: #ffffff;
            font-weight: bold;
            font-size: 20px;
            padding: 10px;
            box-sizing: border-box;
            border: 0 solid #ffffff;
            border-radius: 11px;
            animation-name: example;
            animation-duration: 3s;
            position: relative;
            animation-fill-mode: forwards;
        }
        
        @keyframes example {
            0% {
                background-color: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background-color: yellow;
                left: 315px;
                top: 0px;
            }
            50% {
                background-color: blue;
                left: 415px;
                top: 0px;
            }
            75% {
                background-color: green;
                left: 515px;
                top: 0px;
            }
            100% {
                background-color: red;
                left: 615px;
                top: 0px;
            }
        }
        
        .box {
            margin: 60px auto;
            width: 600px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            border: 10px solid rgba(26, 216, 232, 4);
            border-radius: 14px;
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.1ppt.com%2Fuploads%2Fallimg%2F2009%2F1_200907194125_2.JPG&refer=http%3A%2F%2Fimg.1ppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650184919&t=778d0bd9c6e5b4021d6ecc67fe6eba7f");
        }
        
        .smallbox {
            width: 100px;
            text-shadow: -1px 0 pink, 0 1px pink, 1px 0 pink, 0 -1px pink;
        }
        
        .smallbox>a {
            text-decoration: none;
        }
        
        .smallbox>a:hover {
            color: #00aeec;
        }
    </style>
</head>

<body style="background-image: url(https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF); background-repeat: no-repeat; width: 100%; height: 100%; background-size: cover;">

    <div id="animated_div">
        作业目录
    </div>

    <div class="box">
        <div class="smallbox"><a href="./3.14/作业/选择器练习.html">3.14作业</a></div>
        <div class="smallbox"><a href="./3.15/作业/电影作业.html">3.15作业</a></div>
        <div class="smallbox"><a href="./3.16/作业/盒子.html"> 3.16作业</a></div>
        <div class="smallbox"><a href="./3.16/作业/名字.html"> 3.16作业</a></div>
        <div class="smallbox"><a href="./3.17/作业/图片/bilibili作业.html"> 3.17作业</a></div>
        <div class="smallbox"><a href="./3.18/作业/太极.html"> 太极作业</a></div>
        <div class="smallbox"><a href="./3.18/作业/三角形.html"> 三角形作业</a></div>
        <div class="smallbox"><a href="./3.18/作业/筛子作业.html"> 筛子作业</a></div>
        <div class="smallbox"><a href="./3.18/作业/动态筛子.html"> 动态筛子作业</a></div>
        <div class="smallbox"><a href="./3.21/作业/字体向上.html"> 字体向上作业</a></div>
        <div class="smallbox"><a href="./3.21/作业/渐变作业.html"> 渐变作业</a></div>
        <div class="smallbox"><a href="./3.23/鼎搜网/login.html"> 鼎搜网作业</a></div>
        <div class="smallbox"><a href="./3.28/作业/index.html"> [移动端]团购网站</a></div>
        <div class="smallbox"><a href="./4.6js入门/js入门作业.html"> js入门作业</a></div>
        <div class="smallbox"><a href="./4.7数据类型/数据类型作业.html"> 数据类型作业</a></div>
        <div class="smallbox"><a href="./4.8运算符/01运算符作业.html"> 运算符作业</a></div>
        <div class="smallbox"><a href="./4.11流程控制/流程控制作业.html"> 流程控制作业</a></div>
        <div class="smallbox"><a href="./4.12函数/函数作业.html">函数作业</a></div>
        <div class="smallbox"><a href="./4.13数组/数组作业.html">数组作业</a></div>
        <div class="smallbox"><a href="./4.14对象/对象作业.html">对象作业</a></div>
        <div class="smallbox"><a href="./4.15字符串/字符串作业.html">字符串作业</a></div>
        <div class="smallbox"><a href="./4.18内置对象/时间作业.html">时间作业</a></div>
        <div class="smallbox"><a href="./4.20DOM/小猫作业.html">小猫作业</a></div>
        <div class="smallbox"><a href="./4.22事件进阶/事件进阶作业.html">事件进阶作业</a></div>
        <div class="smallbox"><a href="./4.26测试/test.html">test作业</a></div>
        <div class="smallbox"><a href="./4.27BOM/火箭_2.html">火箭作业</a></div>
        <div class="smallbox"><a href="./4.28ajax/get请求作业.html">get请求作业</a></div>
        <div class="smallbox"><a href="./4.29ajax_2/网易云.html">网易云作业</a></div>
        <div class="smallbox"><a href="./4.29ajax_2/富豪榜.html">富豪榜作业</a></div>
        <div class="smallbox"><a href="./4.29ajax_2/吸顶导航.html">吸顶导航作业</a></div>
        <div class="smallbox"><a href="./5.6promise/promise作业.html">promise作业</a></div>
        <div class="smallbox"><a href="./5.9async丶await/async作业.html">async作业</a></div>
        <div class="smallbox"><a href="./5.16正则/表单验证.html">表单验证作业</a></div>
        <div class="smallbox"><a href="./5.17面向对象/面向对象作业.html">面向对象作业</a></div>
        <div class="smallbox"><a href="./5.18原型链/原型链练习.html">原型链作业</a></div>
        <div class="smallbox"><a href="./5.19es6类/banner.html">banner作业</a></div>
        <div class="smallbox"><a href="./5.20继承/单例弹出层.html">单例弹出层作业</a></div>
        <div class="smallbox"><a href="./6.23/dist/index.html">vue3级菜单作业</a></div>
        <div class="smallbox"><a href="./6.27/dist/index.html">6-27todolist练习</a></div>
        <div class="smallbox"><a href="./6.30/dist/index.html">6-30组件todolist练习</a></div>
        <div class="smallbox"><a href="./7.6/dist/index.html">7-6路由守卫练习</a></div>
    </div>

</body>

</html>